<script src="js/smoothscroll.js"></script>
<script>document.cookie="last=pages/touchpad.php";</script>

<p class="xl">Periféricos - Touchpad</p>
<p>El touchpad (panel táctil) es un dispositivo apuntador con una superficie táctil que detecta el deslizamiento de los dedos y los traduce en el movimiento de un puntero en la pantalla.</p>

<table width="100%" class="center">
    <tr><td>
        <img src="img/touchpad-buttons.jpg" height="192" title="Touchpad"></img>
    </td><td>
        <img src="img/puntero-flecha.png" height="128" title="Puntero flecha"></img>
        <p>Puntero flecha</p>
    </td><td>
        <img src="img/puntero-mano.jpg" height="128" title="Puntero mano"></img>
        <p>Puntero mano</p>
    </td><td>
    <p title="Posicione el puntero sobre la palabra 'aquí'">Mueva el <i>puntero</i> hasta <b onmouseover="mostrar('botones')">aquí</b> para continuar.</p>
    </td></tr>
</table>

<div id="botones" class="oculto">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a manejar el puntero del mouse!</p>
    <p>Como es posible ver en la imagen, el touchpad puede tener varias partes:</p>
    <ol type="A">
        <li><b>Superficie táctil</b>: controla el puntero y, si es presionable, hace lo mismo que el botón izquierdo.</li>
        <li><b>Zona de scroll</b>: si está disponible, permite desplazarse verticalmente por el documento.</li>
        <li><b>Botón izquierdo</b>: realiza la acción principal.</li>
        <li><b>Botón derecho</b>: abre un menu contextual.</li>
    </ol>

    <p>La acción de presionar un botón se denomina 'clic' por el sonido que se escucha al apretarlo.</p>
    <p>Cuando un elemento es 'cliqueable', el puntero del mouse se convierte en una mano similar a la de la imagen.</p>
    <p>Haga clic con el botón <i>izquierdo</i> sobre este <a href="#dobleclic" class="smoothScroll" onclick="mostrar('dobleclic')" title="Clic izquierdo">texto azul</a> para continuar.</p>
</div>

<div id="dobleclic" class="oculto" onmousewheel="if(visible('scroll')){mostrar('derecho');}" onwheel="if(visible('scroll')){mostrar('derecho');}">
    <p class="felicitacion">¡Excelente, ha aprendido a hacer clic izquierdo!</p>
    <p>El botón izquierdo realiza una función distinta al presionarlo dos veces en poco tiempo, acción denominada 'doble clic'.</p>
    <p>Haga <i>doble</i> clic con el botón izquierdo sobre este <a href="#scroll" onclick="event.preventDefault()" ondblclick="mostrar('scroll')" title="Doble clic">enlace especial</a> para continuar.</p>
</div>

<div id="scroll" class="oculto" onmousewheel="mostrar('derecho')" onwheel="mostrar('derecho')">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a hacer doble clic!</p>
    <p>El scroll permite desplazarse verticalmente por un documento. En algunos touchpad requiere deslizar dos dedos simultáneamente. Deslice uno o dos dedos sobre la zona de <i>scroll</i> hacia atras para llegar al final de la página y hacia adelante para ver el principio de la misma.</p>
</div>

<div id="derecho" class="oculto">
    <p class="felicitacion">¡Excelente, ha aprendido a usar el scroll!</p>
    <p>El botón derecho muestra un menú de opciones disponibles para el elemento presionado.</p>
    <p>Para cerrar el menú alcanza con hacer clic izquierdo en cualquier parte de la página.</p>
    <p>Haga clic con el botón <i>derecho</i> sobre <b oncontextmenu="mostrar('final')" title="Clic derecho">este texto</b> para continuar.</p>
</div>

<div id="final" class="oculto">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a hacer clic derecho!</p>
    <p class="siguiente">Haga clic <i>con el botón izquierdo</i> en el siguiente enlace para <a href="#" onclick="load('pages/teclado.php')">seguir aprendiendo</a>.</p>
</div>